<template>
  <div class="c-editor-collaboration-bar__container">
    <a-flex justify="center" align="center" gap="small">
      <div class="c-editor-collaboration-bar__dropdown">
        <a-tooltip
          :title="accountStore.nickname"
          placement="bottom"
          :mouseEnterDelay="1"
        >
          <a-avatar
            :src="accountStore.avatarUrl"
            style="cursor: pointer"
            @click="openListModalVisible"
          ></a-avatar>
        </a-tooltip>
        <collaboration-modal
          v-show="listModalVisible"
          :type="1"
          @close-modal="() => (listModalVisible = false)"
          right="-80px"
        />
      </div>
      <div class="c-editor-collaboration-bar__dropdown">
        <a-button
          type="primary"
          :icon="h(UserAddOutlined)"
          shape="round"
          :disabled="props.myRole === boardRole.Viewer"
          @click="openInviteModalVisible"
        >
          协作
        </a-button>
        <collaboration-modal
          v-show="inviteModalVisible"
          :type="2"
          :show-invite-modal="inviteModalVisible"
          @close-modal="() => (inviteModalVisible = false)"
        />
      </div>
    </a-flex>
  </div>
</template>

<script setup lang="ts">
import { h, onMounted, ref } from 'vue';
import { UserAddOutlined } from '@ant-design/icons-vue';
import CollaborationModal from '@/pages/editor/components/CollaborationBar/CollaborationModal.vue';
import { useAccountStore } from '@/store';
import { boardRole } from '@/utils/Const.ts';

const props = defineProps({
  myRole: {
    type: Number,
    required: true,
  },
});
const accountStore = useAccountStore();
const listModalVisible = ref(false);
const inviteModalVisible = ref(false);
function openListModalVisible() {
  listModalVisible.value = !listModalVisible.value;
  inviteModalVisible.value = false;
}
function openInviteModalVisible() {
  inviteModalVisible.value = !inviteModalVisible.value;
  listModalVisible.value = false;
}

onMounted(async () => {
  await accountStore.getAccountInfo();
});
</script>

<style scoped lang="scss">
.c-editor-collaboration-bar__container {
  position: fixed;
  top: 15px;
  right: 15px;
  background-color: #fff;
  z-index: 1000;
  border-radius: 6px;
  box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.1);
  padding: 5px;
  .c-editor-collaboration-bar__dropdown {
    position: relative;
    display: inline-block;
  }
}
</style>
